<script lang="ts" setup>
import useTable from '@/hooks/useTable'
import { get, post, message, loadFile, formatEnum } from '@/utils'
import { TableColumnData } from '@arco-design/web-vue'
import Coupon from '@/components/SelectModal/Coupon.vue'
import { CouponType, UseCouponType } from '@/enum/coupon'
import useModal from '@/hooks/useModal'
const props = defineProps<{
  val: any[]
  selectType: 'radio' | 'checkbox'
}>()
console.log('🚀 ~ props:', props)
const emit = defineEmits(['update:val'])
const { formatColumns } = useTable()
const { store } = useModal()
const tableData = ref<any[]>(props.val)
const ids = computed(() => tableData.value.map(v => v.id) || [])
watch(
  () => props.val,
  n => {
    tableData.value = n
  },
  { deep: true }
)
watch(
  () => tableData.value,
  n => emit('update:val', n)
)
const columns = formatColumns([
  { title: '优惠券名称', dataIndex: 'name', width: 200 },
  {
    title: '优惠券金额',
    dataIndex: 'money',
    width: 200,
  },
  {
    title: '优惠券状态',
    dataIndex: 'status',
    width: 200,
  },
  {
    title: '领取方式',
    dataIndex: 'type',
    width: 200,
  },
  {
    title: '优惠券使用类型',
    dataIndex: 'useType',
    width: 200,
  },
  // {
  //   title: '剩余数量',
  //   dataIndex: 'lastTotal',
  //   width: 120,
  // },
  {
    title: '可用时间段/天数',
    dataIndex: 'time',
    width: 200,
    render: ({ record }) => h('span', null, record.day ? record.day + '天' : `${record.useStartTime} ~ ${record.useEndTime}`),
  },
  {
    title: '操作',
    dataIndex: 'op',
    width: 100,
    fixed: 'right',
  },
]) as TableColumnData[]
</script>
<template>
  <a-space style="max-width: 100%" direction="vertical">
    <a-button type="text" @click="store.handleShow({})">选择优惠券</a-button>
    <a-table :columns="columns" :data="tableData" header-title="" :pagination="false" :bordered="{ cell: true }" :scroll="{ x: 500 }">
      <template #status="{ record }">
        <a-badge :status="record.status == 1 ? 'success' : 'danger'" :text="record.status == 1 ? '开启' : '关闭'"> </a-badge>
      </template>
      <template #type="{ record }">
        {{ CouponType[record.type] }}
      </template>
      <template #useType="{ record }">
        {{ UseCouponType[record.useType] }}
      </template>
      <template #op="{ record, rowIndex }">
        <a-button type="text" @click="tableData.splice(rowIndex, 1)">删除</a-button>
      </template>
    </a-table>
  </a-space>
  <Coupon v-if="store.show" v-model:show="store.show" :id="ids" :type="$props.selectType" v-model:list="tableData" />
</template>
<style lang="less" scoped></style>
